<!--
 * @Author: 郝奔 1425466221@qq.com
 * @Date: 2024-11-22 09:21:08
 * @LastEditors: 郝奔 1425466221@qq.com
 * @LastEditTime: 2024-12-26 13:35:36
 * @FilePath: /HG-dqbasic_open_platform/src/framework/components/base-comps/dt-detail/index.vue
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
  <el-descriptions class="t_detail" size="small" v-bind="$attrs" :column="descColumn" label-class-name="label_class">
    <el-descriptions-item v-for="(item, key) in descData" :key="key" :label="item.label" :span="item.span || 1"
      v-bind="$attrs">
      <template v-if="item.slotName">
        <slot :name="item.slotName"></slot>
      </template>
      <span class="tip_class" v-else>
        <el-tooltip v-bind="$attrs" v-if="item.tooltip" :placement="item.placement || 'bottom'">
          <span>
            <span v-if="item.filters && item.filters.list">
              {{
    constantEscape(
      dataList?.[item.fieldName],
      listTypeInfo[item.filters.list],
      item.filters.key || 'value',
      item.filters.label || 'label'
    )
  }}
            </span>
            <span v-else>{{ item.value }}</span>
            <el-icon :size="item.iconSize" :color="item.iconColor" style="cursor: pointer; margin-left: 2px; top: 1px">
              <Warning />
            </el-icon>
          </span>
          <template #content v-if="item.tooltip">
            <span v-if="typeof item.tooltip === 'string'">{{
    item.tooltip
  }}</span>
            <template v-else-if="typeof item.tooltip === 'function'">
              <render-tooltip :render="item.tooltip" :item="item" />
            </template>
          </template>
        </el-tooltip>
        <span v-else>
          <span v-if="item.filters && item.filters.list">
            {{
    constantEscape(
      dataList[item.fieldName],
      listTypeInfo[item.filters.list],
      item.filters.key || 'value',
            item.filters.label || 'label'
            )
            }}
          </span>
          <span v-else>{{ item.value ? item.value : '暂无' }}</span>
        </span>
      </span>
    </el-descriptions-item>
  </el-descriptions>
</template>
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script lang="ts">
export default {
  name: 'DtDetail'
};
type ListItem<TKey extends keyof any, TLabel> = {
  [key in TKey]: TLabel;
};
interface DescriptionItem<T> {
  label: string;
  value?: T; // 使用泛型T来表示value可能的多种类型
  span?: number;
  slotName?: string;
  tooltip?: string | unknown; // 根据实际情况调整类型
  fieldName: string;
  placement?: any;
  filters?: {
    list?: string; // 根据实际情况定义更具体的类型
    key?: string;
    label?: string;
  };
  iconSize: string;
  iconColor: string;
  // ... 可以根据需要添加更多字段
}
</script>
<script setup lang="ts">
//   import RenderTooltip from "./renderTooltip.vue"
defineProps({
  descColumn: {
    type: Number,
    default: 1
  },
  // 后台数据源
  dataList: {
    type: Object,
    default: () => ({})
  },
  // 需要解析的下拉数据
  listTypeInfo: {
    type: Object,
    default: () => ({})
  },
  descData: {
    type: Array as PropType<DescriptionItem<unknown>[]>,
    default: () => []
  }
});
/**
 * 下拉数据回显中文过滤器
 * @param [String,Number] value 需要转中文的key值
 * @param {String} list  数据源
 * @param [String,Number] key  数据源的key字段（默认：value）
 * @param {String} label  数据源的label字段（默认：label）
 */
// const constantEscape = (
//   value: string,
//   list: object[],
//   key: string | number,
//   label: string | number
// ): string => {
//   const res = list.find(item => {
//     return item[key] === value;
//   });
//   return res && res[label];
// };
const constantEscape = <TKey extends string | number, TLabel extends string | number>(
  value: string | number,
  list: ListItem<TKey, TLabel>[],
  key: TKey,
  label: TLabel
): string | undefined => {
  const res = list.find(item => item[key] === value);
  return res ? String(res[label]) : undefined;
};
</script>
<style lang="scss" scoped>
.t_detail {
  :deep(.el-descriptions__label) {
    font-weight: bold;
    min-width: 65px;
  }

  :deep(.l-descriptions__cell) {

    // display: flex;
    .label_class {
      text-align: right;
      height: 36px;
      line-height: 36px;
      color: #333333;
      padding: 10px 20px;
      // width: 134px;
    }

    .el-descriptions__content {
      // flex: 1;
      padding: 0 32px;
      font-weight: 400;
      color: #333;
    }

    .label_center {
      text-align: center;
    }
  }

  .demo-image__preview {
    display: flex;
    margin: 16px 0;
  }
}
</style>
